<template>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img class="logo_serch" src="../public/img/serch.png" alt="" />
        </a>
        <a class="navbar-brand" href="#">
          <img class="logo_big" src="../public/img/homepage-logo.png" alt="" />
        </a>
        <a class="navbar-brand" href="#">
          <img class="logo_sim" src="../public/img/d-i-pv-6@2x.png" alt="" />
        </a>
      </div>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <div class="accordion accordion-flush" id="accordionFlushExample">
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingOne">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseOne"
                  aria-expanded="false"
                  aria-controls="flush-collapseOne"
                >
                  个人业务
                </button>
              </h2>
              <div
                id="flush-collapseOne"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingOne"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the first item's accordion body.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingTwo">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseTwo"
                  aria-expanded="false"
                  aria-controls="flush-collapseTwo"
                >
                  商户业务
                </button>
              </h2>
              <div
                id="flush-collapseTwo"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingTwo"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the second item's accordion body.
                  Let's imagine this being filled with some actual content.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingThree">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseThree"
                  aria-expanded="false"
                  aria-controls="flush-collapseThree"
                >
                  机构业务
                </button>
              </h2>
              <div
                id="flush-collapseThree"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingThree"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the third item's accordion body.
                  Nothing more exciting happening here in terms of content, but just filling up the
                  space to make it look, at least at first glance, a bit more representative of how
                  this would look in a real-world application.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingfour">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapsefour"
                  aria-expanded="false"
                  aria-controls="flush-collapsefour"
                >
                  新闻中心
                </button>
              </h2>
              <div
                id="flush-collapsefour"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingfour"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the first item's accordion body.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingfive">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapsefive"
                  aria-expanded="false"
                  aria-controls="flush-collapsefive"
                >
                  了解银联
                </button>
              </h2>
              <div
                id="flush-collapsefive"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingfive"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the first item's accordion body.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingsix">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapsesix"
                  aria-expanded="false"
                  aria-controls="flush-collapsesix"
                >
                  银联国际
                </button>
              </h2>
              <div
                id="flush-collapsesix"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingsix"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the first item's accordion body.
                </div>
              </div>
            </div>
            <div class="accordion-item">
              <h2 class="accordion-header" id="flush-headingseven">
                <button
                  class="accordion-button collapsed"
                  type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#flush-collapseseven"
                  aria-expanded="false"
                  aria-controls="flush-collapseseven"
                >
                  分公司
                </button>
              </h2>
              <div
                id="flush-collapseseven"
                class="accordion-collapse collapse"
                aria-labelledby="flush-headingseven"
                data-bs-parent="#accordionFlushExample"
              >
                <div class="accordion-body">
                  Placeholder content for this accordion, which is intended to demonstrate the
                  <code>.accordion-flush</code> class. This is the first item's accordion body.
                </div>
              </div>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </nav>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="item in banner_list">
      <div class="carousel_img" :style="{ backgroundImage: `url(${item.img_url})` }"></div>
    </van-swipe-item>
  </van-swipe>
  <div class="max_box">
    <div class="input_box">
      <div class="input_img">
        <img class="red_serch" src="../public/img/red_serch.png" alt="" />
      </div>
      <input type="text" name="" id="" placeholder="请输入关键字搜索" />
    </div>

    <div style="width: 100%">
      <ul style="width: 100%; padding: 0px">
        <router-link to="/home">
          <li class="but_list">
            <div>
              <img class="but_img" src="../public/img/but_1.png" alt="" />
            </div>
            <div class="but_text">
              <p class="text_p">云闪付APP</p>
              <p>扫一扫解锁绿色出行</p>
              <p>便民优惠服务好</p>
            </div>
          </li>
        </router-link>
        <router-link to="/about">
          <li class="but_list">
            <div>
              <img class="but_img" src="../public/img/but_2.png" alt="" />
            </div>
            <div class="but_text">
              <p class="text_p">手机闪付</p>
              <p>扫一扫解锁绿色出行</p>
              <p>便民优惠服务好</p>
            </div>
          </li>
        </router-link>

        <li class="but_list" data-bs-toggle="modal" data-bs-target="#exampleModal">
          <div>
            <img class="but_img" src="../public/img/but_3.png" alt="" />
          </div>
          <div class="but_text">
            <p class="text_p">卡产品</p>
            <p>扫一扫解锁绿色出行</p>
            <p>便民优惠服务好</p>
          </div>
        </li>
        <div
          class="modal fade"
          id="exampleModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">卡产品</h1>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <div class="moda_box">
                  <table>
                    姓名：
                  </table>
                  <input v-model="userNamer" type="text" placeholder="请输入姓名" />
                </div>
                <div class="moda_box">
                  <table>
                    手机号：
                  </table>
                  <input v-model="userPhone" type="text" placeholder="请输入手机号" />
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                  取消
                </button>
                <button type="button" class="btn btn-primary" @click="gotolink()">确认</button>
              </div>
            </div>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getImg, search } from './api/index'
import { Swipe, SwipeItem } from 'vant'
import { useListStore } from './stores/counter'
const userNamer = ref('')
const userPhone = ref('')
const banner_list = ref([])
const router = useRouter()
const ListStore = useListStore()

let getbanner = async () => {
  await getImg().then((res) => {
    console.log(res.results)

    banner_list.value = res.results
  })
}
let gotolink = async () => {
  console.log(userNamer.value, userPhone.value)
  await search({ user_name: userNamer.value, user_phone: userPhone.value }).then((res) => {
    console.log(res)
    if (res.code == 200) {
      let list = res.results
      console.log(list)
      ListStore.setList(list)
      router.push({
        name: 'three',
        query: {
          user_name: userNamer.value,
          user_phone: userPhone.value,
        },
      })
    } else {
      alert('提交失败')
    }
  })
  // router.push('/three')
}

onMounted(() => {
  getbanner()
})
</script>

<style>
.my-swipe .van-swipe-item {
  width: 100%;
  height: 300px;
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.carousel_img {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.modal-backdrop {
  display: none;
}
.moda_box > input {
  width: 70%;
  height: 30px;
  border: 1px solid #ff0000;
  padding: 10px 15px;
  margin-left: 10px;
}
.moda_box {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.text_p {
  color: #ff0000;
}
.but_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.but_text > p {
  margin: 0;
}
.but_list {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  background-color: #ccc;
}
.but_img {
  width: 100px;
  height: 100px;
  margin: 0 30px 0 40px;
}
.red_serch {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.max_box {
  width: 90%;
  margin: 0 auto;
}
.input_img {
  margin-left: 10px;
}
.input_box {
  margin-top: 15px;
  margin-bottom: 30px;
  padding: 5px 10px;
  border: 2px solid #fa0000;
  display: flex;
}
.but_css {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* 圆形 */
  background-color: #ff0000; /* 红色 */
  border: none; /* 移除默认边框 */
  outline: none; /* 移除聚焦边框 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.navbar-brand {
  margin: 0;
}
.navbar-toggler {
  border: none;
}
.navbar-brand {
  display: flex;
  justify-content: center;
}
.logo_serch {
  width: 160%;
}
.container {
  display: flex;
  justify-content: space-between;
}
.logo_sim {
  width: 150%;
}
.logo_big {
  width: 50%;
}
@media (max-width: 768px) {
  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
}
</style>
